<template>
	<view class="m">
		<view class="motai">

		</view>
		<view class="t1">
			<view class="box clearfloor">
				<view class="box_li" v-for="i in newdata" :key="i._id" :class="{active:ischoose==i._id}"
					@tap="chooseLi(i)">
					{{i.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["num"],
		mounted(){
			console.log(this.num,1515)
		},
		data() {
			return {
				ischoose: 1,
				ischoose2:1,
				allT: [{
					_id: 1,
					li:[{
						_id: 1,
						name: "交易记录"
					}, {
						_id: 2,
						name: "转入"
					}, {
						_id: 3,
						name: "买进"
					}, {
						_id: 4,
						name: "卖金"
					}, {
						_id: 5,
						name: "投保"
					}, {
						_id: 6,
						name: "站让"
					}, {
						_id: 7,
						name: "冻结/解冻"
					}, {
						_id: 8,
						name: "退保"
					}, {
						_id: 9,
						name: "分红"
					}, {
						_id: 10,
						name: "其他"
					}]
				},{
					_id: 2,
					li:[{
						_id: 1,
						name: "全部"
					}, {
						_id: 2,
						name: "基金"
					}, {
						_id: 3,
						name: "银行精选"
					}, {
						_id: 4,
						name: "养老保险"
					}, {
						_id: 5,
						name: "投保"
					}, {
						_id: 6,
						name: "黄金"
					}, {
						_id: 7,
						name: "冻结/解冻"
					}, {
						_id: 8,
						name: "退保"
					}, {
						_id: 9,
						name: "分红"
					}, {
						_id: 10,
						name: "其他1"
					}, {
						_id: 11,
						name: "其他2"
					}, {
						_id: 12,
						name: "其他3"
					}]
				}]
			}
		},
		computed:{
			newdata(){
				console.log(this.allT.filter(item=>this.num == item._id)[0])
				return this.allT.filter(item=>this.num == item._id)[0].li
			}
		},
		methods: {
			chooseLi(li) {
				this.ischoose = li._id
				this.$emit('chooseqq', li)
			}
		}
	}
</script>

<style scoped lang="scss">
	.motai {
		background-color: red;
		opacity: .3;
		position: fixed;
		top: 70rpx;
		width: 750rpx;
		height: 100vh;
		z-index: 1;


	}

	.t1 {
		position: fixed;
		top: 70rpx;
		width: 750rpx;
		background-color: white;
		z-index: 3;
		padding-bottom: 50rpx;
		overflow: hidden;

		.box {
			background-color: white;

			box-sizing: border-box;
			padding: 10rpx 40rpx;

			.box_li {
				border: 1px solid #ABABAB;
				width: 150rpx;
				height: 80rpx;
				float: left;
				margin: 20rpx 15rpx 0rpx 0rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 5rpx;
			}

			.active {
				border: 1px solid red;
				color: red;
			}
		}

		.clearfloor::after {
			content: "";
			clear: both;
			display: inline-block;
		}
	}
</style>
